<template>
  <div class="deliver-root">
    <div class="header">
      <h1>发货</h1>
      <p>药品发货</p>
    </div>
    <div class="body">
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        ellipsis
        rowKey="order_id"
        style="margin-top: 10px"
        :pagination="false"
      >
        <template #logistics_com="{}">
          <a-select
            ref="select"
            placeholder="请选择快递公司"
            v-model:value="logistics_com"
          >
            <a-select-option value="顺丰速运"> 顺丰速运 </a-select-option>
            <a-select-option value="百世快递"> 百世快递 </a-select-option>
            <a-select-option value="中通快递"> 中通快递 </a-select-option>
            <a-select-option value="申通快递"> 申通快递 </a-select-option>
            <a-select-option value="圆通速递"> 圆通速递 </a-select-option>
            <a-select-option value="韵达速递"> 韵达速递 </a-select-option>
            <a-select-option value="邮政快递包裹"> 邮政快递包裹 </a-select-option>
            <a-select-option value="天天快递"> 天天快递 </a-select-option>
            <a-select-option value="京东快递"> 京东快递 </a-select-option>
            <a-select-option value="优速快递"> 优速快递 </a-select-option>
            <a-select-option value="德邦快递"> 德邦快递 </a-select-option>
            <a-select-option value="宅急送"> 宅急送 </a-select-option>
          </a-select>
        </template>
        <template #logistics_id="{}">
          <a-input placeholder="请输入快递单号" v-model:value="logistics_id" />
        </template>
      </a-table>
      <div class="operation">
        <a-space>
          <a-button @click="back()">取消</a-button>
          <a-button type="primary" @click="toDeliver()">发货</a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script>
import Base64 from "base-64";
import { message } from "ant-design-vue";
const columns = [
  {
    title: "订单编号",
    dataIndex: "order_id",
    key: "order_id",
    align: "center",
  },
  {
    title: "收货人",
    dataIndex: "cus_name",
    key: "cus_name",
    align: "center",
  },
  {
    title: "手机号",
    dataIndex: "cus_tel",
    key: "cus_tel",
    align: "center",
  },
  {
    title: "邮政编码",
    dataIndex: "post_id",
    key: "post_id",
    align: "center",
  },
  {
    title: "收货地址",
    dataIndex: "cus_addr",
    key: "cus_addr",
    align: "center",
  },
  {
    title: "物流公司",
    dataIndex: "logistics_com",
    key: "logistics_com",
    align: "center",
    slots: { customRender: "logistics_com" },
    width: 150 
  },
  {
    title: "物流单号",
    dataIndex: "logistics_id",
    key: "logistics_id",
    align: "center",
    slots: { customRender: "logistics_id" },
  },
];
const data = [
  {
    order_id: "201809150102000002",
    cus_name: "大梨",
    cus_tel: "18033441849",
    post_id: "518000",
    cus_addr: "广东省深圳市福田区东晓街道",
    logistics_com: "",
    logistics_id: "",
  },
];
export default {
  data() {
    return {
      columns,
      data,
      deliver: {},
      logistics_com: "",
      logistics_id: "",
    };
  },
  activated() {
    this.init();
  },
  methods: {
    init() {
      this.deliver = JSON.parse(
        decodeURIComponent(Base64.decode(this.$route.query.deliver))
      );
      this.$axios
        .get("common/address/addrById?addrId=" + this.deliver.addrId)
        .then((res) => {
          if (res.data.code == 2000) {
            this.data = [];
            let addr =
              res.data.data.addrProvince +
              res.data.data.addrCity +
              res.data.data.addrDistrict +
              res.data.data.addrTowns;
            this.data.push({
              order_id: this.deliver.oId,
              cus_name: res.data.data.addrConsignee,
              cus_tel: res.data.data.addrTel,
              post_id: res.data.data.addrPost,
              cus_addr: addr,
              logistics_com: "",
              logistics_id: "",
            });
          } else {
          }
        });
    },

    //发货
    toDeliver() {
      this.$axios
        .get(
          "admin/shopOrder/deliver?logisticsCom=" +
            this.logistics_com +
            "&logisticsId=" +
            this.logistics_id +
            "&oId=" +
            this.deliver.oId
        )
        .then((res) => {
          if (res.data.code == 2000) {
            message.success("修改成功");
            this.$router.go(-1);
          } else {
            message.error("修改失败");
          }
        });
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.deliver-root .header h1 {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
}
.deliver-root .header {
  background-color: #fff;
  padding: 24px;
}
.deliver-root .body {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
.operation {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>